<template>
	<view class="top-menu" @click="subscribe()">
		<view class="top-menu-item" v-for="item in topMenu">
			<image class="top-menu-img" :src="item.icon" mode=""></image>
			<view class="top-menu-item-text">
				<text>{{item.temp}}℃</text>
				<view class="">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	    	const mqtt = require('@/uni_modules/rhliu-mqttjs')
	    export default {
	        components:{
	            
	        },
	        data() {
	            return {
					client: null,
					msg:'',
					acceptMsg:'',
					topMenu:[
						{
							temp:'30',
							text:'集热联箱',
							icon:require("../../static/img/jrlx.png")
						},
						{
							temp:'30',
							text:'保温水箱',
							icon:require("../../static/img/bwsx.png")
						},
						{
							temp:'30',
							text:'地暖出水',
							icon:require("../../static/img/dncs.png")
						},
						{
							temp:'30',
							text:'房间温度 ',
							icon:require("../../static/img/fjwd.png")
						}
					]
	            }
	        },
			mounted() {
			   this.connect()
			},
	     
			 
	        methods: {
	          connect() {
	          	const self = this;
	          	if (!this.client) {
	          		this.client = mqtt.connect('uni://81.69.37.6:8083/mqtt/', {
	          			clientId: 'rhliu_' + Math.random().toString(16).substr(2, 8)
	          		})
	          	}
	          
	          	this.client.on('connect', () => {
	          		self.msg = '连接成功'
					 this.subscribe()
	          	})
	          
	          	this.client.on('message', this.message)
				
	          },
	          subscribe() {
	          	const self = this;
	          	if (this.client && this.client.connected) {
	          		this.client.subscribe('RaspberryPi', function(err) {
	          			if (!err) {
	          				self.msg = '订阅成功'
	          			}
	          		})
	          	}
	          },
	          message(topic, message) {
	          	//this.acceptMsg = `topic:${topic},message:${message.toString()}`
				this.acceptMsg = `${message.toString()}`
				this.acceptMsg =JSON.parse(this.acceptMsg);
				let temps=this.acceptMsg;
	          	this.topMenu.forEach(function(item,index,arr){
				 if(index==0){
					 item.temp=temps.T1
				 }else if(index==1){
					  item.temp=temps.T2
				 }else if(index==2){
					  item.temp=temps.T3
				 }else if(index==3){
					  item.temp=temps.T4
				 }   
			})
	          },
	          publish() {
	          	if (this.client && this.client.connected) {
	          		this.client.publish('RaspberryPi', '测试')
	          		this.msg = '发送消息'
	          	}
	          },
	          unsubscribe() {
	          	const self = this;
	          	if (this.client && this.client.connected) {
	          		this.client.unsubscribe('RaspberryPi', function(err) {
	          			if (!err) {
	          				self.msg = '取消订阅'
	          			}
	          		})
	          	}
	          },
	          send() {
	          	if (this.client && this.client.connected) {
	          		this.client.end(false,{},()=>{
	          			console.log('关闭')
	          		})
	          	}
	          }  
	        }
	    }
</script>

<style scoped lang="scss" scoped>
	.top-menu{
		width: 94%;
		margin: 0 auto;
		padding: 30rpx 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		
		.top-menu-item{
			width: 46%;
			height: 91px;
			position: relative;
			margin: 20rpx 0;
			border-radius: 20rpx;
			.top-menu-img{
				width: 100%;
				height: 100%;
			}
			.image{
				width: 100%;
				height: 100%;
			}
			.top-menu-item-text{
	
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				color: #fff;
				text{
					font-size: 40rpx;
					
				}
				view{
					font-size: 24rpx;
					
				}
			}
		}
	}
	
</style>
